// 验证token是否存在
checkToken()

// 回显用户名
renderUserName()

// 退出功能
logout()

// 封装渲染函数
const render = async () => {
    // 发送请求
    const res = await axios.get('/students')
    console.log(res.data)
    // 获取表格
    const tbody = document.querySelector('.list')
    // 渲染页面
    tbody.innerHTML = res.data.map(item => {
        return `
        <tr>
            <td>${item.name}</td>
            <td>${item.age}</td>
            <td>${item.gender === 0 ? '男' : '女'}</td>
            <td>第${item.group}组</td>
            <td>${item.hope_salary}</td>
            <td>${item.salary}</td>
            <td>${item.province + item.city + item.area}</td>
            <td>
            <a href="javascript:;" class="text-success mr-3"><i class="bi bi-pen" data-id=${item.id}></i></a>
            <a href="javascript:;" class="text-danger"><i class="bi bi-trash" data-id=${item.id}></i></a>
            </td>
        </tr>
        `
    }).join('')
    // 更新学员数量
    document.querySelector('.total').innerHTML = res.data.length
}

render() // 页面首次渲染

// 新增弹框
const modalDom = document.querySelector('#modal')
const myModal = new bootstrap.Modal(modalDom)
// 获取表单
const form = document.querySelector('#form')


// 获取省市区
const provinceDom = document.querySelector('[name = "province"]')
const cityDom = document.querySelector('[name = "city"]')
const areaDom = document.querySelector('[name = "area"]')
// 省市区联动函数
const selectInit = async () => {
    const res = await axios.get('/api/province')
    console.log(res.list)
    // 生成省份下拉菜单
    document.querySelector('[name = "province"]').innerHTML += res.list.map(item => {
        return `<option value="${item}">${item}</option>`
    }).join('')
    // 当省份变动的时候
    document.querySelector('[name = "province"]').addEventListener('change', async e => {
        // 清空城市列表
        document.querySelector('[name = "city"]').innerHTML = '<option value="">--城市--</option>'
        const res = await axios.get('/api/city', { params: { pname: e.target.value } })
        console.log(res);
        // 生成城市下拉菜单
        document.querySelector('[name = "city"]').innerHTML += res.list.map(item => {
            return `<option value="${item}">${item}</option>`
        }).join('')
    })
    // 当城市变动的时候
    document.querySelector('[name = "city"]').addEventListener('change', async e => {
        // 清空地区列表
        document.querySelector('[name = "area"]').innerHTML = '<option value="">--地区--</option>'
        const res = await axios.get('/api/area', { params: { pname: document.querySelector('[name = "province"]').value, cname: e.target.value } })
        console.log(res)
        document.querySelector('[name = "area"]').innerHTML += res.list.map(item => {
            return `<option value="${item}">${item}</option>`
        }).join('')
    })
}
selectInit()

// 添加学员弹出模态框
document.querySelector('#openModal').addEventListener('click', e => {
    // 打开模态框
    myModal.show()
    // 修改模态框的title
    document.querySelector('.modal-title').innerHTML = '添加学员'
})
// 封装增加学生信息函数
const addStudent = async () => {
    const data = serialize(form, { hash: true, empty: true })
    // 将字符串转换为数字类型
    data.age = +data.age
    data.gender = +data.gender
    data.group = +data.group
    data.hope_salary = +data.hope_salary
    data.salary = +data.salary
    console.log(data)
    // 数据提交
    try {
        const res = await axios.post('/students', data)
        console.log(res)
        // 提示信息
        showToast(res.message)
        // 关闭弹窗 清空表单信息
        myModal.hide()
        form.reset()
        // 渲染页面
        render()
    } catch (error) {
        console.log(error)
        myModal.hide()
        showToast('输入有误,请检查输入内容')
        form.reset()
    }
}

// 绑定确认事件
document.querySelector('#submit').addEventListener('click', e => {
    // 判断点击确认时是编辑还是添加
    const txt = document.querySelector('.modal-title').innerHTML
    console.log(txt)
    if (txt.includes('添加')) {
        // 调用增加学生信息函数
        addStudent()
    } else if (txt.includes('编辑')) {
        // 编辑功能 => 封装编辑函数
        editSubmit()
    }

})

// 删除学生
document.querySelector('.list').addEventListener('click', e => {
    // 如果是删除
    if (e.target.classList.contains('bi-trash')) {
        const id = e.target.dataset.id
        // 调用删除函数
        delStudent(id)
    }
    // 如果是编辑
    if (e.target.classList.contains('bi-pen')) {
        const id = e.target.dataset.id
        // 弹出模态框
        myModal.show()
        // 修改模态框的title
        document.querySelector('.modal-title').innerHTML = '编辑学员'
        // 调用编辑函数 => 1.获取详情 2.回显数据
        editStudent(id)
        // 把学生id赋值给模态框的data-id属性
        document.querySelector('.modal-title').dataset.id = id
    }
})

// 封装删除函数
const delStudent = async (id) => {
    console.log(id)

    try {
        // 调用删除接口
        const res = await axios.delete(`/students/${id}`)
        showToast('删除成功')
        // 重新渲染
        render()
    } catch (error) {
        showToast('删除失败')
    }
}

// 封装编辑函数
const editStudent = async (id) => {
    console.log('编辑')
    // 获取学生详情
    const res = await axios.get(`/students/${id}`)
    console.log(res.data)
    // 回显数据
    // 定义数组 回显简单属性
    const arrKey = ['name', 'age', 'group', 'hope_salary', 'salary']
    arrKey.forEach(item => {
        document.querySelector(`[name=${item}]`).value = res.data[item]
    })
    // 回显性别
    const sex = document.querySelectorAll('[name="gender"]')
    res.data.gender === 0 ? sex[0].checked = true : sex[1].checked = true
    // 回显籍贯
    // 1.回显省份
    const { province, city, area } = res.data
    console.log(province, city, area)
    provinceDom.value = province
    // 2.根据回显的省份 获取城市列表并回显城市
    const res1 = await axios.get('/api/city', {
        params: {
            pname: province
        }
    })
    console.log(res1)
    // 渲染城市列表
    cityDom.innerHTML += res1.list.map(item => {
        return `<option value="${item}">${item}</option>`
    }).join('')
    // select的值的赋值 必须在有了列表之后
    cityDom.value = city
    // 3.根据省份和城市获取地区列表并回显
    const res2 = await axios.get('/api/area', {
        params: {
            pname: province,
            cname: city
        }
    })
    // 渲染地区列表
    areaDom.innerHTML += res2.list.map(item => {
        return `<option value="${item}">${item}</option>`
    }).join('')
    areaDom.value = area
}

// 编辑学生的提交函数
const editSubmit = async () => {
    // 拿到用户id
    const id = document.querySelector('.modal-title').dataset.id
    // 获取编辑数据
    const data = serialize(form, { hash: true, empty: true })
    // 将data里的数字类型变为parseInt
    data.age = +data.age
    data.gender = +data.gender
    data.group = +data.group
    data.hope_salary = +data.hope_salary
    data.salary = +data.salary
    console.log(data)
    try {
        // 发生编辑请求
        const res = await axios.put(`/students/${id}`, data)
        console.log(res)
        // 关闭模态框
        myModal.hide()
        // 弹窗提示
        showToast(res.message)
        // 清空表单
        form.reset()
        // 渲染页面
        render()
        // 编辑成功后 清除标题中的id
        document.querySelector('.modal-title').dataset.id
    } catch (error) {
        console.log(error)
    }
}